<div class="px-2 text-base font-medium">{{ 'PAC.Chat.Tasks' | translate: {Default: 'Tasks'} }}: </div>

@for (task of syncedTasks(); track task.id) {
  <div class="task flex items-center w-full rounded-2xl px-6 py-4 shadow-sm border-[0.5px] border-solid border-gray-300 hover:shadow-md"
    [class.deleted]="!!task.deletedAt"
    [matTooltip]="task.deletedAt ? ('PAC.Chat.TaskDeleted' | translate: {Default: 'The task has been deleted'}) : null "
    matTooltipPosition="above"
  >
    <div class="flex-1 flex flex-col justify-start items-start overflow-hidden">
      <div class="font-medium truncate">{{task.name}}</div>
      <div class="text-sm text-text-secondary truncate">{{task.scheduleDescription || task.schedule}}</div>
    </div>

    @if (!task.deletedAt) {
      @if (task.status === eXpertTaskStatus.RUNNING) {
        <button type="button" class="w-8 h-8 flex justify-center items-center rounded-lg opacity-50 hover:bg-gray-50 hover:opacity-100"
          [matTooltip]="'PAC.Chat.PauseTask' | translate: {Default: 'Pause the Task'}"
          matTooltipPosition="above"
          (click)="pause(task)">
          <i class="ri-pause-circle-line text-xl"></i>
        </button>
      } @else if (task.status === eXpertTaskStatus.PAUSED) {
        <button type="button" class="w-8 h-8 flex justify-center items-center rounded-lg opacity-50 hover:bg-gray-50 hover:opacity-100"
          [matTooltip]="'PAC.Chat.ScheduleTask' | translate: {Default: 'Schedule the Task'}"
          matTooltipPosition="above"
          (click)="schedule(task)">
          <i class="ri-play-circle-line text-xl"></i>
        </button>
      }
    }

    <button type="button" class="w-8 h-8 flex justify-center items-center rounded-full opacity-50 hover:bg-gray-50 hover:opacity-100"
      [cdkMenuTriggerFor]="menu"
      [cdkMenuTriggerData]="{task: task}"
    >
      <i class="ri-more-2-fill"></i>
    </button>
  </div>
} @empty {
  <div class="p-4 text-text-secondary">{{'PAC.Chat.NoTasksAvailable' | translate: {Default: 'No tasks available'} }}</div>
}

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full" />
}

<ng-template #menu let-task="task">
  <div cdkMenu class="cdk-menu__large">
    @if (!task.deletedAt) {
      <div cdkMenuItem (click)="editTask(task)">
        <i class="ri-edit-line mr-1"></i>
        {{ 'PAC.ACTIONS.Edit' | translate: { Default: 'Edit' } }}
      </div>
      @if (task.status === eXpertTaskStatus.RUNNING) {
        <div cdkMenuItem (click)="pause(task)">
          <i class="ri-pause-circle-line mr-1"></i>
          {{ 'PAC.Chat.Pause' | translate: { Default: 'Pause' } }}
        </div>
      }
    }
    
    <div class="border-b border-solid border-divider-regular my-1"></div>
    <div cdkMenuItem routerLink="/chat/tasks">
      <i class="ri-list-check-3 mr-1"></i>
      {{ 'PAC.Xpert.ViewAllTasks' | translate: { Default: 'View all tasks' } }}
    </div>
  </div>
</ng-template>